import React, { useState, useContext, useEffect } from 'react';
import { Field, reduxForm } from 'redux-form';
import {
  View,
  TextInput,
  Text,
  TouchableHighlight,
  TouchableOpacity,
} from 'react-native';
import { CheckBox } from 'react-native-elements';
import IconFont from '../../assets/iconfont';
import { AuthContext } from '../../components/context';
import { colors } from 'react-native-tailwindcss';
// import CountDownButton from 'react-native-smscode-count-down';
import styles from './styles';

let SignInScreen = props => {
  const { userInfo, getUserInfoSaga } = props;
  useEffect(() => {
    getUserInfoSaga();

    return () => {};
  }, [getUserInfoSaga]);

  console.log(userInfo, 'userInfo');

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [checked, setChecked] = useState(false);
  const [passwordShow, setPasswordShow] = useState(false);
  const [countDownButtonEnable, setCountDownButtonEnable] = useState(true);

  const { signIn } = useContext(AuthContext);

  return (
    <View style={styles.fullScreen}>
      {/* 登录表单 */}
      <View style={styles.form}>
        {/* 表单标题 */}
        <Text style={styles.formTitle}>登录</Text>

        {/* 手机号 */}
        <View style={styles.formLabel}>
          <View style={styles.formLabelFields}>
            <Text style={styles.formLabelName}>手</Text>
            <Text style={styles.formLabelName}>机</Text>
          </View>
          <View style={styles.formLabelDelimiter} />
          <TextInput
            style={styles.formLabelInput}
            placeholder="请输入您的手机号"
            onChangeText={setUsername}
            autoComplete="tel"
            keyboardType="phone-pad"
            maxLength={11}
          />
        </View>

        {/* 密码 */}
        <View style={styles.formLabel}>
          <View style={styles.formLabelFields}>
            <Text style={styles.formLabelName}>密</Text>
            <Text style={styles.formLabelName}>码</Text>
          </View>
          <View style={styles.formLabelDelimiter} />
          <View style={styles.formLabelInner}>
            <TextInput
              style={styles.formLabelInput}
              placeholder="6-12 位字母数字组合"
              onChangeText={setPassword}
              autoComplete="password"
              maxLength={12}
              secureTextEntry={!passwordShow}
            />
            <TouchableHighlight onPress={() => setPasswordShow(!passwordShow)}>
              {passwordShow ? (
                <IconFont
                  name="icon-eye-h"
                  color={colors.themeBlue}
                  size={20}
                />
              ) : (
                <IconFont name="icon-biyan" color={colors.gray500} size={20} />
              )}
            </TouchableHighlight>
          </View>
        </View>

        {/* 验证码 */}
        <View style={styles.formLabel}>
          <View style={styles.formLabelFields}>
            <Text style={styles.formLabelName}>验</Text>
            <Text style={styles.formLabelName}>证</Text>
            <Text style={styles.formLabelName}>码</Text>
          </View>
          <View style={styles.formLabelDelimiter} />
          <View style={styles.formLabelInner}>
            <TextInput
              style={styles.formLabelInput}
              placeholder="请输入验证码"
              onChangeText={setPassword}
              keyboardType="numeric"
              maxLength={6}
            />
            {/* <CountDownButton
              style={styles.formLabelButton}
              textStyle={styles.formLabelButtonText}
              enable={countDownButtonEnable}
              disableColor={colors.gray500}
              onClick={shouldStartCountting => {
                //随机模拟发送验证码成功或失败
                const requestSucc = Math.random() > 0.5;
                shouldStartCountting(requestSucc);
              }}
              timerEnd={() => {
                console.log('倒计时结束');
              }}
            /> */}
          </View>
        </View>

        {/* 协议 */}
        <View style={styles.formCheckbox}>
          <CheckBox
            center
            onPress={() => setChecked(!checked)}
            containerStyle={styles.formCheckboxInner}
            checkedIcon={
              <IconFont name="icon-finish" color={colors.themeBlue} size={20} />
            }
            uncheckedIcon={
              <IconFont name="icon-finish" color={colors.gray400} size={20} />
            }
            checked={checked}
          />
          <Text style={styles.formCheckboxText}>同意</Text>
          <Text style={styles.formCheckboxLink}>《用户协议》</Text>
          <Text style={styles.formCheckboxText}> & </Text>
          <Text style={styles.formCheckboxLink}>《隐私协议》</Text>
        </View>

        {/* 登录按钮 */}
        <TouchableOpacity
          onPress={() => signIn({ username, password })}
          style={styles.formButton}>
          <Text style={styles.formButtonText}>登 录</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// SignInScreen = reduxForm({
//   form: 'contact',
// })(SignInScreen);

export default SignInScreen;
